<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${videoTitle}">视频播放</title>
    <!-- 引入 Video.js CSS 和 JS -->
    <link href="https://vjs.zencdn.net/7.15.4/video-js.min.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
    <link rel="shortcut icon" th:href="@{ico/favicon.ico}"/>
    <link th:href="@{../css/bootstrap.css}" rel="stylesheet">
    <style>
        /* 自定义样式 */
        .video-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        video {
            width: 100%; /* 根据需要调整宽度 */
            max-width: 960px; /* 最大宽度限制 */
            height: auto;
        }
    </style>
<body>
<div class="container my-5">
    <h3 class="text-center" th:text="${videoTitle}"></h3>
    <br><br>
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="embed-responsive embed-responsive-16by9">
                <video controls class="embed-responsive-item">
                    <source th:src="${videoUrl}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap Bundle JS (包含 Popper) 和 jQuery -->
<script th:src="@{js/bootstrap.js}"></script>
<script th:src="@{js/jQuery.js}"></script>
</body>
</html>